<!-- 密保 -->
<template>
  <div>
    <el-dialog width="30%" title="设置密保" v-model="innerVisible">
      <el-form label-position="top" label-width="80px" :model="formLabelAlign" class="formLabelAlign" size="medium">
        <el-form-item>
          <el-autocomplete class="inline-input" v-model="formLabelAlign.problem1" :fetch-suggestions="querySearch"
            placeholder="请选择或者输入密保问题"></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入问题的答案" v-model="formLabelAlign.answer1" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-autocomplete class="inline-input" v-model="formLabelAlign.problem2" :fetch-suggestions="querySearch"
            placeholder="请选择或者输入密保问题"></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入问题的答案" v-model="formLabelAlign.answer2" clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onsubmit">确定</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import { confidentialityProtectionaddOrEdit, confidentialityProtectionList } from '@/api/request.js'
export default {
  name: 'secrecySetting',
  components: {},
  data() {
    return {
      innerVisible: false,
      formLabelAlign: {},
      list: [],
      restaurants: [
        { value: '你的籍贯是哪里？' },
        { value: '你最喜欢的颜色是什么？' },
        { value: '你的生日或生日月份是什么？' },
        { value: '你的毕业院校是哪所？' },
        { value: '-----自定义-----' },
      ],
    }
  },
  computed: {},
  watch: {
    'formLabelAlign.problem1'(newv) {
      if (newv == '3') {
        this.showProblem1Flag = false
      }
    },
    'formLabelAlign.problem2'(newv) {
      if (newv == '3') {
        this.showProblem2Flag = false
      }
    },
  },
  created() { },
  mounted() { },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      }
    },

    onsubmit() {
      if (this.formLabelAlign.answer1 == this.formLabelAlign.answer2) {
        this.$message.warning('两个答案不能相同')
        return
      }
      const accountId = localStorage.getItem('accountId')
      const list = [
        {
          accountId: accountId,
          protectionId: this.list[0] ? this.list[0].protectionId : '',
          answer: this.formLabelAlign.answer1,
          problem: this.formLabelAlign.problem1,
        },
        {
          accountId: accountId,
          protectionId: this.list[1] ? this.list[1].protectionId : '',
          answer: this.formLabelAlign.answer2,
          problem: this.formLabelAlign.problem2,
        },
      ]
      confidentialityProtectionaddOrEdit(list).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
          this.innerVisible = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getList() {
      const accountId = localStorage.getItem('accountId')
      confidentialityProtectionList(accountId).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.data

          if (res.data.data.length == 2) {
            this.formLabelAlign = {
              problem1: res.data.data[0].problem,
              answer1: res.data.data[0].answer,
              problem2: res.data.data[1].problem,
              answer2: res.data.data[1].answer,
            }
          }
        } else {
          // this.$message.error(res.data.message)
        }
      })
    },

    // 打开弹窗
    openDialog() {
      this.innerVisible = true
      this.getList()
    },
  },
}
</script>
<style lang="less" scoped>
.el-autocomplete {
  width: 100%;
}
</style>
